<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>个人博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta property="og:type" content="website">
<meta property="og:title" content="个人博客">
<meta property="og:url" content="https://gitee.com/wieldy/bailment-blog/index.html">
<meta property="og:site_name" content="个人博客">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/bailment-blog/atom.xml" title="个人博客" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/bailment-blog/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/bailment-blog/css/style.css">

  
    
<link rel="stylesheet" href="/bailment-blog/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 6.3.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/bailment-blog/" id="logo">个人博客</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/bailment-blog/">Home</a>
        
          <a class="main-nav-link" href="/bailment-blog/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/bailment-blog/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://gitee.com/wieldy/bailment-blog"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main">
  
    <article id="post-工作日志" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2023/07/03/%E5%B7%A5%E4%BD%9C%E6%97%A5%E5%BF%97/" class="article-date">
  <time class="dt-published" datetime="2023-07-03T08:17:38.000Z" itemprop="datePublished">2023-07-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/bailment-blog/2023/07/03/%E5%B7%A5%E4%BD%9C%E6%97%A5%E5%BF%97/">工作日志</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// responseType:&#x27;blob&#x27;</span></span><br><span class="line"><span class="comment">// arraybuffer	ArrayBuffer对象</span></span><br><span class="line"><span class="comment">// blob	Blob对象</span></span><br><span class="line"><span class="comment">// document	Document对象</span></span><br><span class="line"><span class="comment">// json	JS 对象 ， 解析得到的从服务器返回来的JSON字符串</span></span><br><span class="line"><span class="comment">// text	DOMString</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// XMLHttpRequest.responseType 属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的&quot;text&quot;类型。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 当将responseType设置为一个特定的类型时，你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。那么如果两者类型不兼容呢?恭喜你，你会发现服务器返回的数据变成了null，即使服务器返回了数据。还有一个要注意的是，给一个同步请求设置responseType会抛出一个InvalidAccessError 的异常</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 简而言之，　responseType　的作用就是设置ａｊａｘ　数据响应的类型，　你告诉服务器，让服务器返回什么样的数据类型给你</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//数据来源：https://blog.csdn.net/yudldl/article/details/83095523</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">download</span>(<span class="params">data: <span class="built_in">any</span></span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>: <span class="string">`/smart/eye/map/legend/details/download?file=<span class="subst">$&#123;data&#125;</span>`</span>,</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&quot;get&quot;</span>,</span><br><span class="line">    <span class="attr">responseType</span>: <span class="string">&quot;blob&quot;</span>,</span><br><span class="line">    <span class="comment">// multipart/form-data转base64 信息来源：https://juejin.cn/post/7251131990438264889</span></span><br><span class="line">    <span class="attr">headers</span>: &#123; <span class="string">&quot;Content-Type&quot;</span>: <span class="string">&quot;multipart/form-data&quot;</span> &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">download</span>(nameads.<span class="property">value</span>)</span><br><span class="line">  .<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// let aBlob = new Blob(array, options);</span></span><br><span class="line">    <span class="keyword">const</span> blob = <span class="keyword">new</span> <span class="title class_">Blob</span>([res], &#123;</span><br><span class="line">      <span class="attr">type</span>: <span class="string">&quot;application/pdf&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">const</span> link = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;a&quot;</span>);</span><br><span class="line">    <span class="keyword">const</span> fileName = <span class="string">&quot;202305&quot;</span> + nameads.<span class="property">value</span> + <span class="string">&quot;公司简报.pdf&quot;</span>;</span><br><span class="line">    link.<span class="property">href</span> = <span class="variable language_">window</span>.<span class="property">URL</span>.<span class="title function_">createObjectURL</span>(blob);</span><br><span class="line">    link.<span class="title function_">setAttribute</span>(<span class="string">&quot;download&quot;</span>, fileName);</span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(link);</span><br><span class="line">    link.<span class="title function_">click</span>();</span><br><span class="line">  &#125;)</span><br><span class="line">  .<span class="title function_">catch</span>(<span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> blob = <span class="keyword">new</span> <span class="title class_">Blob</span>([err], &#123;</span><br><span class="line">      <span class="comment">// 如何后端没返回下载文件类型，则需要手动设置：type: &#x27;application/pdf;chartset=UTF-8&#x27; 表示下载文档为pdf，如果是word则设置为msword，excel为excel</span></span><br><span class="line">      <span class="attr">type</span>: <span class="string">&quot;application/pdf&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">const</span> link = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;a&quot;</span>);</span><br><span class="line">    <span class="keyword">const</span> fileName = <span class="string">&quot;202305&quot;</span> + nameads.<span class="property">value</span> + <span class="string">&quot;公司简报.pdf&quot;</span>;</span><br><span class="line">    link.<span class="property">href</span> = <span class="variable language_">window</span>.<span class="property">URL</span>.<span class="title function_">createObjectURL</span>(blob);</span><br><span class="line">    link.<span class="title function_">setAttribute</span>(<span class="string">&quot;download&quot;</span>, fileName);</span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(link);</span><br><span class="line">    link.<span class="title function_">click</span>();</span><br><span class="line">    <span class="comment">// const &#123;msg&#125; = err</span></span><br><span class="line">    <span class="comment">// window.$message.warning(msg||&#x27;请重新刷新数据&#x27;)</span></span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// request.ts中响应拦截器</span></span><br><span class="line">    <span class="comment">// 响应数据为二进制流处理(Excel导出)</span></span><br><span class="line">    <span class="keyword">if</span> (response.<span class="property">data</span> <span class="keyword">instanceof</span> <span class="title class_">ArrayBuffer</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> response;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 进制流为blob</span></span><br><span class="line">    <span class="keyword">if</span> (response.<span class="property">data</span> <span class="keyword">instanceof</span> <span class="title class_">Blob</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> response.<span class="property">data</span>;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. .d.ts的顶级声明必须以declare开头</span></span><br><span class="line"><span class="comment">// 2. 以declare声明的变量和模块后，其他地方不需要引入，就可以直接使用了</span></span><br><span class="line"><span class="comment">// 信息来源：https://blog.csdn.net/youhebuke225/article/details/125664535</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">declare</span> <span class="keyword">const</span> <span class="attr">def</span>: <span class="function">(<span class="params">obj: <span class="built_in">object</span>, key: <span class="built_in">string</span> | <span class="built_in">symbol</span>, value: <span class="built_in">any</span></span>) =&gt;</span> <span class="built_in">void</span>;</span><br></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">TypeScript</span>中infer</span><br><span class="line">场景假设：我们有个黑盒类型<span class="title class_">Arr</span>，明确知道<span class="title class_">Arr</span>是一个数组，但确实不知道数组的元素是什么类型，这时候就可以有以下写法：</span><br><span class="line"><span class="comment">// 黑盒类型：</span></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Arr</span> = <span class="title class_">Array</span>&lt;<span class="built_in">string</span> | <span class="built_in">number</span>&gt;</span><br><span class="line"><span class="comment">// 获取方法:</span></span><br><span class="line"><span class="keyword">type</span> get&lt;T&gt; = T <span class="keyword">extends</span> <span class="title class_">Array</span>&lt;infer U&gt; ? U : T</span><br><span class="line"><span class="comment">// 获取的结果:</span></span><br><span class="line"><span class="keyword">type</span> B = get&lt;<span class="title class_">Arr</span>&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 另一个例子</span></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">ThisParameterType</span>&lt;T&gt; = T <span class="keyword">extends</span> (<span class="attr">this</span>: infer U, ...<span class="attr">args</span>: <span class="built_in">never</span>) =&gt; <span class="built_in">any</span> ? U : <span class="built_in">unknown</span>;</span><br></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">服务器渲染 &amp; vue-router</span><br></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> axios, &#123; <span class="keyword">type</span> <span class="title class_">AxiosRequestConfig</span>, <span class="keyword">type</span> <span class="title class_">AxiosResponse</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;axios&#x27;</span>;</span><br></pre></td></tr></table></figure>

<!--
其他了解：
AR、VR、MR、XR的区别
VR：能让人完全沉浸在虚拟环境中
AR：能创建一个叠加在虚拟内容的世界，但不能与真实环境交互
MR：虚拟与现实的混合体，能创造出可以与真实环境交互的虚拟物体
XR：包括三种“现实”（AR/VR/MR）的术语
数据来源：https://baijiahao.baidu.com/s?id=1750979163479963018&wfr=spider&for=pc
微信推出XR-FRAME 实现虚拟现实的交互
-->

<p>虚拟dom的好处？可以跨平台 diff算法<br>编译时：compiler<br>运行时：runtime<br>共享：shared<br>项目管理：Monorepo  分包管理<br>pnpm<br>esbuild</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2023/07/03/%E5%B7%A5%E4%BD%9C%E6%97%A5%E5%BF%97/" data-id="clowxs0ko0000xqfy6qw8fh0s" data-title="工作日志" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-payMent" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2023/06/29/payMent/" class="article-date">
  <time class="dt-published" datetime="2023-06-29T14:12:00.000Z" itemprop="datePublished">2023-06-29</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/bailment-blog/2023/06/29/payMent/">payMent</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <p>微信公众号h5页面支付前端流程</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">mounted</span>(<span class="params"></span>) &#123;</span><br><span class="line">	<span class="keyword">let</span> openId = uni.<span class="title function_">getStorageSync</span>(<span class="string">&#x27;fy_openid&#x27;</span>);</span><br><span class="line">	<span class="keyword">if</span> (openId) &#123;</span><br><span class="line">		<span class="variable language_">this</span>.<span class="property">openId</span> = openId;</span><br><span class="line">		<span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">let</span> code = <span class="variable language_">this</span>.<span class="title function_">getUrlKey</span>(<span class="string">&#x27;code&#x27;</span>);</span><br><span class="line">	<span class="keyword">if</span> (!code) &#123;</span><br><span class="line">		<span class="keyword">let</span> url =</span><br><span class="line">			<span class="string">&quot;https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5e5d798832f4d853&amp;redirect_uri=&quot;</span> +</span><br><span class="line">			<span class="built_in">encodeURIComponent</span>(location.<span class="property">href</span>) + <span class="string">&quot;&amp;response_type=code&amp;scope=snsapi_base&amp;state=123#wechat_redirect&quot;</span>;</span><br><span class="line">		location.<span class="property">href</span> = url;</span><br><span class="line">	&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">		<span class="title function_">getOpenIdBycode</span>(code).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">			<span class="keyword">if</span> (res.<span class="property">code</span> == <span class="number">0</span>) &#123;</span><br><span class="line">				<span class="variable language_">this</span>.<span class="property">openId</span> = res.<span class="property">data</span>.<span class="property">openId</span>;</span><br><span class="line">				uni.<span class="title function_">setStorageSync</span>(<span class="string">&#x27;fy_openid&#x27;</span>, res.<span class="property">data</span>.<span class="property">openId</span>);</span><br><span class="line">			&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">				uni.<span class="title function_">showToast</span>(&#123;</span><br><span class="line">					<span class="attr">icon</span>: <span class="string">&#x27;error&#x27;</span>,</span><br><span class="line">					<span class="attr">title</span>: res.<span class="property">msg</span> || <span class="string">&quot;网络出现异常，请重新扫码后进入&quot;</span>,</span><br><span class="line">					<span class="attr">duration</span>: <span class="number">2000</span></span><br><span class="line">				&#125;)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">getUrlKey</span>(<span class="params">name</span>) &#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="built_in">decodeURIComponent</span>((<span class="keyword">new</span> <span class="title class_">RegExp</span>(<span class="string">&#x27;[?|&amp;]&#x27;</span> + name + <span class="string">&#x27;=&#x27;</span> + <span class="string">&#x27;([^&amp;;]+?)(&amp;|#|;|$)&#x27;</span>).<span class="title function_">exec</span>(location.<span class="property">href</span>) || [, <span class="string">&quot;&quot;</span>])[<span class="number">1</span>].<span class="title function_">replace</span>(<span class="regexp">/\+/g</span>, <span class="string">&#x27;%20&#x27;</span>)) || <span class="literal">null</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">placeOrder</span>(&#123;</span><br><span class="line">	<span class="attr">money</span>: sendMoney,</span><br><span class="line">	<span class="attr">openId</span>: <span class="variable language_">this</span>.<span class="property">openId</span>,</span><br><span class="line">	<span class="attr">memberCard</span>: <span class="variable language_">this</span>.<span class="property">id</span>,</span><br><span class="line">	<span class="attr">payType</span>: <span class="number">1</span></span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">		<span class="keyword">if</span> (res.<span class="property">code</span> == <span class="number">0</span>) &#123;</span><br><span class="line">			wx.<span class="title function_">hideLoading</span>();</span><br><span class="line">			<span class="keyword">return</span> <span class="title function_">toPay</span>(res.<span class="property">data</span>);</span><br><span class="line">		&#125;</span><br><span class="line">		uni.<span class="title function_">showToast</span>(&#123;</span><br><span class="line">			<span class="attr">icon</span>: <span class="string">&#x27;none&#x27;</span>,</span><br><span class="line">			<span class="attr">title</span>: res.<span class="property">msg</span></span><br><span class="line">		&#125;)</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">		uni.<span class="title function_">showToast</span>(&#123;</span><br><span class="line">			<span class="attr">icon</span>: <span class="string">&#x27;none&#x27;</span>,</span><br><span class="line">			<span class="attr">title</span>: err.<span class="property">data</span> || <span class="string">&quot;错误&quot;</span></span><br><span class="line">		&#125;)</span><br><span class="line">	&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">toPay</span>(<span class="params">data</span>) &#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">			<span class="title class_">WexinPayFactory</span>.<span class="title function_">wexinPay</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(data.<span class="property">body</span>), <span class="keyword">function</span>(<span class="params">res</span>) &#123;</span><br><span class="line">				uni.<span class="title function_">showToast</span>(&#123;</span><br><span class="line">					<span class="attr">title</span>: <span class="string">&quot;支付成功&quot;</span>,</span><br><span class="line">					<span class="attr">duration</span>: <span class="number">2000</span></span><br><span class="line">				&#125;);</span><br><span class="line">			&#125;);</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	微信支付方法(uni-app h5)适用</span></span><br><span class="line"><span class="comment">	获取微信加签信息</span></span><br><span class="line"><span class="comment">	@param&#123;data&#125;:获取的微信加签</span></span><br><span class="line"><span class="comment">	@param&#123;res&#125;:成功回调</span></span><br><span class="line"><span class="comment">	@param&#123;fail&#125;:失败回调</span></span><br><span class="line"><span class="comment">	</span></span><br><span class="line"><span class="comment">	@warn:因为package为严格模式下的保留字，不能用作变量.</span></span><br><span class="line"><span class="comment">	@use</span></span><br><span class="line"><span class="comment">	</span></span><br><span class="line"><span class="comment">		wPay(&#123;</span></span><br><span class="line"><span class="comment">			appId,</span></span><br><span class="line"><span class="comment">			timeStamp,</span></span><br><span class="line"><span class="comment">			nonceStr,</span></span><br><span class="line"><span class="comment">			signature,</span></span><br><span class="line"><span class="comment">			package,</span></span><br><span class="line"><span class="comment">			paySign</span></span><br><span class="line"><span class="comment">		&#125;,res=&gt;&#123;</span></span><br><span class="line"><span class="comment">			console.log(‘调用成功!‘);</span></span><br><span class="line"><span class="comment">		&#125;,fail=&gt;&#123;</span></span><br><span class="line"><span class="comment">			console.log(‘调用失败!‘);</span></span><br><span class="line"><span class="comment">		&#125;)</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">const</span> wx = <span class="built_in">require</span>(<span class="string">&#x27;jweixin-module&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">WexinPayFactory</span> &#123;</span><br><span class="line">	<span class="title function_">wexinPay</span>(<span class="params">data, successCallBack</span>) &#123;</span><br><span class="line">		<span class="keyword">let</span> [appId, timestamp, nonceStr, signature, packages, paySign] = [data.<span class="property">appId</span>, data.<span class="property">timeStamp</span>, data.<span class="property">nonceStr</span>, data.<span class="property">sign</span>,</span><br><span class="line">			data.<span class="property">package</span>, data.<span class="property">sign</span></span><br><span class="line">		];</span><br><span class="line">		wx.<span class="title function_">config</span>(&#123;</span><br><span class="line">			<span class="attr">debug</span>: <span class="literal">false</span>, <span class="comment">// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。</span></span><br><span class="line">			appId, <span class="comment">// 必填，公众号的唯一标识</span></span><br><span class="line">			timestamp, <span class="comment">// 必填，生成签名的时间戳</span></span><br><span class="line">			nonceStr, <span class="comment">// 必填，生成签名的随机串</span></span><br><span class="line">			signature, <span class="comment">// 必填，签名，见附录1</span></span><br><span class="line">			<span class="attr">jsApiList</span>: [<span class="string">&#x27;chooseWXPay&#x27;</span>] <span class="comment">// 必填，需要使用的JS接口列表，所有JS接口列表见附录2</span></span><br><span class="line">		&#125;);</span><br><span class="line">		wx.<span class="title function_">ready</span>(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">			wx.<span class="title function_">chooseWXPay</span>(&#123;</span><br><span class="line">				timestamp, <span class="comment">// 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符</span></span><br><span class="line">				nonceStr, <span class="comment">// 支付签名随机串，不长于 32 位</span></span><br><span class="line">				<span class="string">&#x27;package&#x27;</span>: packages, <span class="comment">// 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）</span></span><br><span class="line">				<span class="attr">signType</span>: <span class="string">&#x27;MD5&#x27;</span>, <span class="comment">// 签名方式，默认为‘SHA1‘，使用新版支付需传入‘MD5‘</span></span><br><span class="line">				paySign, <span class="comment">// 支付签名</span></span><br><span class="line">				<span class="title function_">success</span>(<span class="params">res</span>) &#123;</span><br><span class="line">					<span class="comment">// 支付成功后的回调函数</span></span><br><span class="line">					<span class="title function_">successCallBack</span>(res);</span><br><span class="line">				&#125;,</span><br><span class="line">				<span class="title function_">fail</span>(<span class="params">res</span>) &#123;</span><br><span class="line">					uni.<span class="title function_">showToast</span>(&#123;</span><br><span class="line">						<span class="attr">icon</span>: <span class="string">&#x27;none&#x27;</span>,</span><br><span class="line">						<span class="attr">title</span>: <span class="string">&#x27;支付失败&#x27;</span></span><br><span class="line">					&#125;)</span><br><span class="line"></span><br><span class="line">					<span class="keyword">return</span>;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;);</span><br><span class="line"></span><br><span class="line">		wx.<span class="title function_">error</span>(<span class="keyword">function</span>(<span class="params">res</span>) &#123;</span><br><span class="line">			<span class="comment">// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。</span></span><br><span class="line">			<span class="comment">/*alert(&quot;config信息验证失败&quot;);*/</span></span><br><span class="line">		&#125;);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">new</span> <span class="title class_">WexinPayFactory</span>();</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2023/06/29/payMent/" data-id="cljmgj1ey000nzc9j7klvenk3" data-title="payMent" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-网红面试题" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2023/06/20/%E7%BD%91%E7%BA%A2%E9%9D%A2%E8%AF%95%E9%A2%98/" class="article-date">
  <time class="dt-published" datetime="2023-06-20T08:05:38.000Z" itemprop="datePublished">2023-06-20</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/bailment-blog/2023/06/20/%E7%BD%91%E7%BA%A2%E9%9D%A2%E8%AF%95%E9%A2%98/">原理题</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <p>浏览器是用V8语言，V8引擎去处理js语言，v8语言是如何运行了js语言的呢?<br>js语言是属于高级语言，高级语言是不能被cpu所处理的，cpu只能处理机器语言，<br>所以说中间要有一个转化的过程，需要把高级语言转化成汇编语言，那么转化的过程就需要咱们的抽象语法术，称做为AST树，在这个里面提供了一个Assign的一个模块，那么这个模块每当函数被调用一次。每当函数被执行一次，当前这个模块会给它打标记，把它从一个高级语言转换成一个可以解析的汇编语言。<br>在往下，汇编语言怎么转换成机器语言，就是0101的这样的一个形式，它是通过一个浏览器内部的一个叫Turbo fan这样的东西，那么它也是一个集成的模块，将它把这个东西转换成一个可以执行的执行码，放到cpu里面，作为一个可以运行的程序，一个一段开辟开关进行执行，那么优化的方案或者说我们去做一个浏览器内核的方案，通常也是从这两块，一个是ignition，一个是Turbofan，这两个地方去做的，包括常见的Blink，Gecko，以及Mozilla之类的，都是使用这样的一个架构或者模式吧，然后最近比较火的是这个V8，V8也是使用这样的一个模式延续下去去做的。浏览器底层内容的重要性。</p>
<p>项目从立项到上线整个流程？<br>产品经理PM去挖掘需求，然后做一个原型图，然后我们去做评审，评审之后，确认无误，然后把这件事的文档发给UI，UE，发给2D和Fe对应的部门去产出对应的接口文档和设计文档，还有前端的开发文档，接下来就是正式的一个排期，走项目的一个过程，做项目的话会按照具体的一个功能点，把这个功能单打散，每个功能点去按照一个人日去进行排，等到排期的最后一步呢，我们把前端写的代码和后台写的代码合到一起去做联调，然后联调的时间大概是开发时间的3&#x2F;4左右，然后最后的话，有一个ui，ue的验收，和pm的验收，确认没问题我们去提测，然后提测的时间大概是1&#x2F;2左右的一个时间，确认无误后，去定一个良辰吉日去上线，上线的话一般是在这个用户量比较低的时候，大概是晚上8点钟之后，去做一个上线，但如果是贵公司有这种无损上线的方案的话也可以去找一个好一点的事情，就是晚上四五点钟的时候上线，也是可以的，上线之后，如果有问题的话，需要及时去做这个上线问题的修复，如果没问题的话，就可以去发这个邮件，通知上线成功了。通常上线流程的话一般也分为两步，通常会先上一个模拟环境或者要单台机，确认无误的时候，所有的上线的代码，去推全推全量。然后去发布到每个区域的集群上，大概就这样的一个流程。</p>
<p>AST语法树<br>语法抽象，然后把语法按照树形结构给你抽象出来，标记出了各个节点，然后知道节点之后，有什么好处呢，你可以按照自己的一个需求，比如说我就要对dom节点，就要对test节点，就要对方法节点做一些操作的时候，通过ast，再结合一些这种线程的插件生成一个.json的文件，然后通过这样的一个文件，去对你整个项目做一个分析，一是可以优化你的项目，第二你再做一些loader或者是做一些plugin的时候，可以用到AST，再一点，做文件的转换呀，做一些代码的转编译啊，或者做这台的转编译等等，都可以用到这样的AST，它是一个很常见的技术，但是，我觉得就是以一个刚毕业的学生，没必要回答这样的一个问题。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2023/06/20/%E7%BD%91%E7%BA%A2%E9%9D%A2%E8%AF%95%E9%A2%98/" data-id="cljmgj1f3000tzc9j50ngcmhg" data-title="原理题" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-前端大屏自适应方法" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2023/06/19/%E5%89%8D%E7%AB%AF%E5%A4%A7%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E6%96%B9%E6%B3%95/" class="article-date">
  <time class="dt-published" datetime="2023-06-19T04:32:34.000Z" itemprop="datePublished">2023-06-19</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/bailment-blog/2023/06/19/%E5%89%8D%E7%AB%AF%E5%A4%A7%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E6%96%B9%E6%B3%95/">前端大屏自适应方法</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;home&quot; ref=&quot;homeref&quot;&gt;</span><br><span class="line">  	&lt;slot&gt;&lt;/slot&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script lang=&quot;ts&quot; setup&gt;</span><br><span class="line">  import &#123; onMounted,ref,reactive &#125; from &#x27;vue&#x27;</span><br><span class="line">	//用于使用ref获取dom元素</span><br><span class="line">	const homeref = ref&lt;any&gt;(null)</span><br><span class="line">	const Specifications = reactive(&#123;</span><br><span class="line">		//定义的宽高比例，初始为1</span><br><span class="line">		ww: 1,</span><br><span class="line">		wh: 1,</span><br><span class="line">		//根据class=&quot;home&quot;里面定义的宽高进行作为初始宽高进行计算</span><br><span class="line">		//！自定义内容！</span><br><span class="line">		width: 1920,</span><br><span class="line">		height: 1080,</span><br><span class="line">		//！自定义内容！</span><br><span class="line">	&#125;)</span><br><span class="line">	//将方法定义在响应式对象里面使得代码整洁一些</span><br><span class="line">	const method = reactive(&#123;</span><br><span class="line">		getScale() &#123;</span><br><span class="line">			// 获取到缩放比例</span><br><span class="line">			Specifications.wh = window.innerHeight / Specifications.height</span><br><span class="line">			Specifications.ww = window.innerWidth / Specifications.width</span><br><span class="line">			//将比例设置进dom元素中</span><br><span class="line">			homeref._value.style.setProperty(&#x27;--scaleX&#x27;, Specifications.ww)</span><br><span class="line">			homeref._value.style.setProperty(&#x27;--scaleY&#x27;, Specifications.wh)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	onMounted(() =&gt; &#123;</span><br><span class="line">		//调用getScale()方法</span><br><span class="line">		method.getScale()</span><br><span class="line">        window.addEventListener(&#x27;resize&#x27;,method.getScale)</span><br><span class="line">	&#125;)</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">  .home &#123;</span><br><span class="line">    width: 1920px;</span><br><span class="line">    height: 919px;</span><br><span class="line">    transform: scale(var(--scaleX), var(--scaleY));</span><br><span class="line">    transform-origin: 0 0;</span><br><span class="line">    left: 50%;</span><br><span class="line">    top: 50%;</span><br><span class="line">    transition: 0.3s;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2023/06/19/%E5%89%8D%E7%AB%AF%E5%A4%A7%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E6%96%B9%E6%B3%95/" data-id="cljmgj1f1000rzc9jdl9qavzs" data-title="前端大屏自适应方法" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-10个JavaScript常见高级知识点" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2023/06/17/10%E4%B8%AAJavaScript%E5%B8%B8%E8%A7%81%E9%AB%98%E7%BA%A7%E7%9F%A5%E8%AF%86%E7%82%B9/" class="article-date">
  <time class="dt-published" datetime="2023-06-17T10:10:52.000Z" itemprop="datePublished">2023-06-17</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/bailment-blog/2023/06/17/10%E4%B8%AAJavaScript%E5%B8%B8%E8%A7%81%E9%AB%98%E7%BA%A7%E7%9F%A5%E8%AF%86%E7%82%B9/">10个JavaScript常见高级知识点</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="1-防抖"><a href="#1-防抖" class="headerlink" title="1. 防抖"></a>1. 防抖</h2><p>防抖的意思是，在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">debounce</span>(<span class="params">fn, time</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> timer</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="built_in">clearTimeout</span>(timer)</span><br><span class="line">        <span class="keyword">let</span> args = <span class="variable language_">arguments</span></span><br><span class="line">        timer = <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span> &#123;</span><br><span class="line">            fn.<span class="title function_">apply</span>(<span class="variable language_">this</span>, args)</span><br><span class="line">        &#125;, timer)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="2-节流"><a href="#2-节流" class="headerlink" title="2. 节流"></a>2. 节流</h2><p>节流的意思是，规定时间内，只触发一次。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">throttle</span>(<span class="params">fn, time</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> timer = <span class="literal">null</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (timer) <span class="keyword">return</span></span><br><span class="line">        timer = <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span> &#123;</span><br><span class="line">            fn.<span class="title function_">apply</span>(<span class="variable language_">this</span>, <span class="variable language_">arguments</span>)</span><br><span class="line">            timer = <span class="literal">null</span></span><br><span class="line">        &#125;, timer)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="3-高阶函数"><a href="#3-高阶函数" class="headerlink" title="3. 高阶函数"></a>3. 高阶函数</h2><p>接受或返回另一个函数的函数被称为高阶函数。常见的像map, reduce, filter这些都是高阶函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">x,y,fn</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">fn</span>(x) + <span class="title function_">fn</span>(y);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">num</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title class_">Math</span>.<span class="title function_">abs</span>(num)</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">add</span>(-<span class="number">5</span>, <span class="number">6</span>, fn);</span><br></pre></td></tr></table></figure>

<h2 id="4-函数柯里化"><a href="#4-函数柯里化" class="headerlink" title="4. 函数柯里化"></a>4. 函数柯里化</h2><p>函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。<br>函数柯里化的主要作用和特点就是参数复用，提前返回和延迟执行。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 普通的add函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">x, y</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> x + y</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 柯里化后</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">curryingAdd</span>(<span class="params">x</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">function</span> (<span class="params">y</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> x + y</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">add</span>(<span class="number">1</span>, <span class="number">2</span>)</span><br><span class="line"><span class="title function_">curryingAdd</span>(<span class="number">1</span>)(<span class="number">2</span>)</span><br></pre></td></tr></table></figure>

<h2 id="5-数组去重"><a href="#5-数组去重" class="headerlink" title="5.数组去重"></a>5.数组去重</h2><p>一. Set去重</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">7</span>,<span class="number">7</span>]</span><br><span class="line"><span class="keyword">const</span> res = <span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="keyword">new</span> <span class="title class_">Set</span>(arr))</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(res) <span class="comment">// [1,2,3,4,5,7]</span></span><br></pre></td></tr></table></figure>
<p>二. filter去重</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">removeRepeat</span> = arr =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> arr.<span class="title function_">filter</span>(<span class="function">(<span class="params">item, index</span>) =&gt;</span> arr.<span class="title function_">indexOf</span>(item, <span class="number">0</span>) === index)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>三. includes去重</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title function_">removeRepeat</span> = arr =&gt; &#123;</span><br><span class="line">    <span class="keyword">let</span> repeatArr = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; len = arr.<span class="property">length</span>; i &lt; len; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (!repeatArr.<span class="title function_">includes</span>(arr[i])) repeatArr.<span class="title function_">push</span>(arr[i])</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> repeatArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="6-数组扁平化"><a href="#6-数组扁平化" class="headerlink" title="6. 数组扁平化"></a>6. 数组扁平化</h2><p>一：flat方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, [<span class="number">2</span>, [<span class="number">3</span>, [<span class="number">4</span>,<span class="number">5</span>]]],<span class="number">6</span>]</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">flatten</span>(<span class="params">arr</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> arr.<span class="title function_">flat</span>(<span class="title class_">Infinity</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">flatten</span>(arr)) <span class="comment">//[1,2,3,4,5,6]</span></span><br></pre></td></tr></table></figure>
<p>也可以使用toString，正则，循环递归等来实现</p>
<h2 id="7-深拷贝"><a href="#7-深拷贝" class="headerlink" title="7. 深拷贝"></a>7. 深拷贝</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">deepClone</span>(<span class="params">obj</span>) &#123;</span><br><span class="line">    <span class="comment">// 原始类型和null直接返回</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> obj !== <span class="string">&#x27;object&#x27;</span> || obj == <span class="literal">null</span>) <span class="keyword">return</span> obj</span><br><span class="line">    <span class="keyword">let</span> newObj = <span class="title class_">Array</span>.<span class="title function_">isArray</span>(obj) ? [] : &#123;&#125;</span><br><span class="line">    <span class="comment">// 处理日期对象</span></span><br><span class="line">    <span class="keyword">if</span> (obj <span class="keyword">instanceof</span> <span class="title class_">Date</span>) &#123;</span><br><span class="line">        newObje = <span class="keyword">new</span> <span class="title class_">Date</span>(obj)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 处理正则对象</span></span><br><span class="line">    <span class="keyword">if</span> (obj <span class="keyword">instanceof</span> <span class="title class_">RegExp</span>) &#123;</span><br><span class="line">        newObj = <span class="keyword">new</span> <span class="title class_">RegExp</span>(obj)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">        <span class="keyword">if</span> (obj.<span class="title function_">hasOwnProperty</span>(key)) &#123;</span><br><span class="line">            <span class="comment">// 如果属性为对象就进行递归</span></span><br><span class="line">            newObj[key] = <span class="keyword">typeof</span> obj[key] == <span class="string">&#x27;object&#x27;</span> ?<span class="title function_">deepClone</span>(obj[key]) : obj[key]</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> newObj;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="8-getBoundingCilentRect"><a href="#8-getBoundingCilentRect" class="headerlink" title="8. getBoundingCilentRect"></a>8. getBoundingCilentRect</h2><p>getBoundingCilentRect用于获取页面中某个元素的坐，上，右和下分别对于浏览器视窗的位置。<br>该函数返回一个对象，该对象有6个属性：top, left, right, bottom, width, height<br>top: 元素顶部(上边)距离浏览器顶部的距离<br>right: 元素右边距离浏览器左边的距离<br>left: 元素左边距离浏览器左边的距离<br>bottom: 元素底部距离浏览器顶部的距离</p>
<p>判断某个元素是否滚动到了可视区域内</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">onscroll</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> box = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;.box&quot;</span>);</span><br><span class="line">    <span class="comment">// 获取浏览器窗口可视化高度</span></span><br><span class="line">    <span class="keyword">const</span> clientHeight = <span class="variable language_">window</span>.<span class="property">innerHeight</span> || <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span></span><br><span class="line">    <span class="comment">// 获取box元素顶部到浏览器窗口顶部的距离</span></span><br><span class="line">    <span class="comment">// 如果距离小于可视化窗口高度，就说明元素滚动到了可视区内</span></span><br><span class="line">    <span class="keyword">if</span> (boxTop &lt;= clientHeight) &#123;</span><br><span class="line">        <span class="comment">// 可以控制元素的显示隐藏或者进行其他操作</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="9-IntersectionObserver"><a href="#9-IntersectionObserver" class="headerlink" title="9. IntersectionObserver"></a>9. IntersectionObserver</h2><p>使用IntersectionObserver实现图片的懒加载</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">data-origin</span>=<span class="string">&quot;./images/desktop_1.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">data-origin</span>=<span class="string">&quot;./images/desktop_2.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">data-origin</span>=<span class="string">&quot;./images/desktop_3.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">data-origin</span>=<span class="string">&quot;./images/desktop_4.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">data-origin</span>=<span class="string">&quot;./images/desktop_5.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">observe</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> images = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;img&#x27;</span>)</span><br><span class="line">    <span class="keyword">let</span> observer = <span class="keyword">new</span> <span class="title class_">IntersectionObserver</span>(<span class="function"><span class="params">entries</span> =&gt;</span> &#123;</span><br><span class="line">        entries.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (item.<span class="property">isIntersecting</span>) &#123;</span><br><span class="line">                item.<span class="property">target</span>.<span class="property">src</span> = item.<span class="property">target</span>.<span class="property">dataset</span>.<span class="property">origin</span>;</span><br><span class="line">                observer.<span class="title function_">unobserve</span>(item.<span class="property">target</span>)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;, &#123;</span><br><span class="line">        <span class="attr">rootMargin</span>: <span class="string">&#x27;0px 0px 300px 0px&#x27;</span> <span class="comment">// 监视区向下扩展300px</span></span><br><span class="line">    &#125;)</span><br><span class="line">    images.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> observer.<span class="title function_">observe</span>(item))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="10-自定义事件"><a href="#10-自定义事件" class="headerlink" title="10. 自定义事件"></a>10. 自定义事件</h2><p>什么是自定义事件？在开发的过程中，我们会监听很多的事件，比如：点击事件（click），鼠标移动事件（mousemove）等等。<br>这些事件是js给我们提供的，但是有时候这些事件并不能满足我们的开发需要，这个时候就可以用自定义事件来解决。自定义事件可以让我们<br>自主命名事件名，并且可以通过特定的方法进行添加，触发以及删除。<br>如何使用：目前实现自定义事件的两种主要方式是js的Event()构造函数和CustomEvent()构造函数来创建。</p>
<ol>
<li>Event<br>Event()构造函数，用来创建一个新的事件对象Event.<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// typeArg: stirng类型，表示创建事件的名称</span></span><br><span class="line"><span class="comment">// eventInit: object类型，可选项，参数包括： bubbles-表示该事件是否冒泡；cancelable-</span></span><br><span class="line"><span class="keyword">let</span> myEvent = <span class="keyword">new</span> <span class="title class_">Event</span>(typeArg, eventInit)</span><br></pre></td></tr></table></figure>
演示：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> btn = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;button&#x27;</span>)</span><br><span class="line"><span class="comment">// 创建事件</span></span><br><span class="line"><span class="keyword">let</span> myEvent = <span class="keyword">new</span> <span class="title class_">Event</span>(<span class="string">&#x27;myEvnet&#x27;</span>, &#123;</span><br><span class="line">    <span class="attr">bubbles</span>: <span class="literal">true</span> <span class="comment">// 是否冒泡</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 给按钮添加点击事件</span></span><br><span class="line">btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 触发自定义事件</span></span><br><span class="line">    <span class="title function_">dispatchEvent</span>(myEvent)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 给自定义事件添加事件监听器</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventLIstener</span>(<span class="string">&#x27;myEvent&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;触发了自定义事件&#x27;</span>) <span class="comment">//当调用dispatchEvent(myEvent)时就会触发监听</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
</ol>
<p>二：CustomEvent<br>CustomEvent()构造函数，创建一个新的事件对象CustomEvent.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// typeArg类型，表示创建事件的名称</span></span><br><span class="line"><span class="comment">// eventInit: object类型，可选项，参数包括：bubbles-表示该事件是否冒泡：cancelable-</span></span><br><span class="line"><span class="keyword">let</span> myEvent = <span class="keyword">new</span> <span class="title class_">CustomEvent</span>(typeArg, eventInit);</span><br></pre></td></tr></table></figure>
<p>演示：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> btn = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;button&#x27;</span>)</span><br><span class="line"><span class="comment">// 创建事件</span></span><br><span class="line"><span class="keyword">let</span> myEvent = <span class="keyword">new</span> <span class="title class_">CustomEvent</span>(<span class="string">&#x27;myEvent&#x27;</span>, &#123;</span><br><span class="line">    <span class="attr">detail</span>: &#123; <span class="attr">name</span>: <span class="string">&#x27;前端&#x27;</span> &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 给按钮添加点击事件</span></span><br><span class="line">btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 触发自定义事件</span></span><br><span class="line">    <span class="title function_">dispatchEvent</span>(myEvent)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 给自定义事件添加事件监听</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;myEvent&#x27;</span>, <span class="keyword">function</span>(<span class="params">e</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;触发了自定义事件&#x27;</span>, <span class="string">`name为<span class="subst">$&#123;e.detail.name&#125;</span>`</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>三：Event和CustomEvent的区别<br>Event()一般用来创建简单的自定义事件，而CustomEvent()支持传递参数的自定义事件，它支持detail参数，可以在detail中放<br>一些需要传递的参数，并在监听函数中获取。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2023/06/17/10%E4%B8%AAJavaScript%E5%B8%B8%E8%A7%81%E9%AB%98%E7%BA%A7%E7%9F%A5%E8%AF%86%E7%82%B9/" data-id="cljmgj1es0003zc9j1xs9bsvd" data-title="10个JavaScript常见高级知识点" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-vue3-2.reactivity" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2023/04/23/vue3-2.reactivity/" class="article-date">
  <time class="dt-published" datetime="2023-04-23T12:11:43.652Z" itemprop="datePublished">2023-04-23</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/bailment-blog/2023/04/23/vue3-2.reactivity/">2.reactivity</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <p>更新中…</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2023/04/23/vue3-2.reactivity/" data-id="cljmgj1f0000qzc9jgcxghdqf" data-title="2.reactivity" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-TypeScript2" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2023/04/21/TypeScript2/" class="article-date">
  <time class="dt-published" datetime="2023-04-21T06:15:15.000Z" itemprop="datePublished">2023-04-21</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/bailment-blog/2023/04/21/TypeScript2/">TypeScript 2</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="泛型类与泛型约束"><a href="#泛型类与泛型约束" class="headerlink" title="泛型类与泛型约束"></a>泛型类与泛型约束</h2><p>泛型类</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Log</span>&lt;T&gt; &#123;</span><br><span class="line">    <span class="title function_">run</span>(<span class="params">value: T</span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(value)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>注：泛型类不能应用于类的静态成员</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> log1 = <span class="keyword">new</span> <span class="title class_">Log</span>&lt;<span class="built_in">number</span>&gt;() <span class="comment">//为数字泛型</span></span><br><span class="line">    log1.<span class="title function_">run</span>(<span class="number">1</span>)</span><br><span class="line"><span class="keyword">let</span> log2 = <span class="keyword">new</span> <span class="title class_">Log</span>() <span class="comment">//可传任意类型</span></span><br></pre></td></tr></table></figure>

<p>泛型约束</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Length</span> &#123;</span><br><span class="line">    <span class="attr">length</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> log&lt;T <span class="keyword">extends</span> <span class="title class_">Length</span>&gt;(<span class="attr">value</span>: T): T &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(value, value.<span class="property">length</span>)</span><br><span class="line">    <span class="keyword">return</span> value</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">log</span>([<span class="number">1</span>]) <span class="title function_">log</span>(<span class="string">&#x27;123&#x27;</span>) <span class="title function_">log</span>(&#123; <span class="attr">length</span>: <span class="number">1</span> &#125;)</span><br></pre></td></tr></table></figure>
<p>泛型的好处：<br>1.函数和类可以轻松地支持多种类型，增加程序的扩展性<br>2.不必写多条函数重载，冗长的联合类型声明，增强代码可读性<br>3.灵活控制类型之间的约束</p>
<h2 id="类型检查机制"><a href="#类型检查机制" class="headerlink" title="类型检查机制"></a>类型检查机制</h2><p>TypeScript编译器在做类型检查时，所秉承的一些原则，以及表现出的一些行为。<br>作用：辅助开发，提升开发效率。<br>1.类型推断<br>2.类型兼容性<br>3.类型保护<br>这一块有不少内容~~~~~ 单独再讲 接下来来讲Typescript中的高级类型</p>
<h2 id="交叉类型与联合类型"><a href="#交叉类型与联合类型" class="headerlink" title="交叉类型与联合类型"></a>交叉类型与联合类型</h2><p>高级类型是指TS未来保障语言的灵活性，引用的一些语言特性。用于多变的开发场景。<br>交叉类型    将多个类型合并为一个类型，新的类型将具有所有类型的特性。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">DogInterface</span> &#123;</span><br><span class="line">    <span class="title function_">run</span>(): <span class="built_in">void</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">CatInterface</span> &#123;</span><br><span class="line">    <span class="title function_">jump</span>(): <span class="built_in">void</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// &amp; 取所有类型的并集</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">pet</span>:<span class="title class_">DogInterface</span> &amp; <span class="title class_">CatInterface</span> = &#123;</span><br><span class="line">    <span class="title function_">run</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">    <span class="title function_">jump</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>联合类型    声明的类型并不确定，可以为多个类型中的一个。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">a</span>:<span class="built_in">number</span> | <span class="built_in">string</span> = <span class="string">&#x27;a&#x27;</span> <span class="comment">// 调用两者的公用方法</span></span><br><span class="line"><span class="comment">// 字面量类型 有时不仅限定一个变量的类型，而且限定变量的取值在某一个特定的范围内。</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">b</span>:<span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;b&#x27;</span> | <span class="string">&#x27;c&#x27;</span>; <span class="keyword">let</span> <span class="attr">c</span>:<span class="number">1</span> | <span class="number">2</span> | <span class="number">3</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Dog</span> <span class="keyword">implements</span> <span class="title class_">DogInterface</span> &#123;</span><br><span class="line">    <span class="title function_">run</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">    <span class="title function_">eat</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Cat</span> <span class="keyword">implements</span> <span class="title class_">CatInterface</span> &#123;</span><br><span class="line">    <span class="title function_">jump</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">    <span class="title function_">eat</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">enum</span> <span class="title class_">Master</span> &#123; <span class="title class_">Boy</span>, <span class="title class_">Girl</span> &#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getPet</span>(<span class="params">master: Master</span>) &#123;</span><br><span class="line">    <span class="comment">// pet 为联合类型</span></span><br><span class="line">    <span class="keyword">let</span> pet = master === <span class="title class_">Master</span>.<span class="property">Boy</span> ? <span class="keyword">new</span> <span class="title class_">Dog</span>() : <span class="keyword">new</span> <span class="title class_">Cat</span>()</span><br><span class="line">    pet.<span class="title function_">eat</span>() <span class="comment">//所有类型的交集</span></span><br><span class="line">    <span class="keyword">return</span> pet</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>模式：可区分的联合类型 结合联合类型和字面量类型的一种类型保护方法。<br>核心思想：一个类型如果是多个类型的联合类型，并且每个类型之间有公共的属性，可以根据这个属性创建不同的保护区块。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Rectangle</span> &#123;</span><br><span class="line">    <span class="attr">kind</span>: <span class="string">&#x27;rectangle&#x27;</span>;</span><br><span class="line">    <span class="attr">width</span>: <span class="built_in">number</span>;</span><br><span class="line">    <span class="attr">height</span>: <span class="built_in">number</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Square</span> &#123;</span><br><span class="line">    <span class="attr">kind</span>: <span class="string">&#x27;square&#x27;</span>,</span><br><span class="line">    <span class="attr">size</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Circle</span> &#123;</span><br><span class="line">    <span class="attr">kind</span>: <span class="string">&#x27;circle&#x27;</span>,</span><br><span class="line">    <span class="attr">r</span>: <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Shape</span> = <span class="title class_">Rectangle</span> | <span class="title class_">Square</span> | <span class="title class_">Circle</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">area</span>(<span class="params">s: Shape</span>):<span class="built_in">number</span> &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&quot;square&quot;</span>:</span><br><span class="line">        <span class="keyword">return</span> s.<span class="property">size</span> * s.<span class="property">zize</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&quot;rectangle&quot;</span>:</span><br><span class="line">        <span class="keyword">return</span> s.<span class="property">height</span> * s.<span class="property">width</span>;</span><br><span class="line">    <span class="attr">default</span>:</span><br><span class="line">        <span class="keyword">return</span> (<span class="function">(<span class="params">e:<span class="built_in">never</span></span>) =&gt;</span> &#123; <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(e) &#125;)(s)</span><br><span class="line">        <span class="comment">// 如果s为never类型，则前面所有分支都被覆盖</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">area</span>(&#123; <span class="attr">kind</span>: <span class="string">&#x27;circle&#x27;</span>, <span class="attr">r</span>:<span class="number">1</span> &#125;))</span><br></pre></td></tr></table></figure>
<h2 id="高级类型-2-索引类型"><a href="#高级类型-2-索引类型" class="headerlink" title="高级类型(2):索引类型"></a>高级类型(2):索引类型</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">    <span class="attr">b</span>: <span class="number">2</span>,</span><br><span class="line">    <span class="attr">c</span>: <span class="number">3</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getValues</span>(<span class="params">obj:<span class="built_in">any</span>, keys: <span class="built_in">string</span>[]</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> keys.<span class="title function_">map</span>(<span class="function"><span class="params">key</span> =&gt;</span> obj[key])</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">getValues</span>(obj, [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>])) <span class="comment">// [1,2]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">getValues</span>(ojb, [<span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>])) <span class="comment">// [undefined,undefined] TS并没有进行检查</span></span><br></pre></td></tr></table></figure>
<p>检测obj对象没有e,f属性？引入索引类型<br>1.索引类型的查询操作符<br>含义：表示类型T的所有公共属性的字面量的联合类型。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">keyof T</span><br></pre></td></tr></table></figure>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Obj</span> &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="built_in">number</span>,</span><br><span class="line">    <span class="attr">b</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">key</span>:keyof obj   <span class="comment">//key为a和b字面量的联合类型</span></span><br><span class="line"><span class="comment">// === let key: number | string</span></span><br></pre></td></tr></table></figure>

<p>2.索引访问操作符 语法:T[k] 对象T的属性k所有代表的类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">value</span>:obj[<span class="string">&#x27;a&#x27;</span>]</span><br><span class="line">T <span class="keyword">extends</span> U <span class="comment">// 泛型变量可以继承某个类型获得某些属性</span></span><br></pre></td></tr></table></figure>
<p>改造 getValues函数</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> getValue&lt;T, K <span class="keyword">extends</span> keyof T&gt;(<span class="attr">obj</span>:T,<span class="attr">keys</span>:k[]):T[k][] &#123;</span><br><span class="line">    <span class="keyword">return</span> keys.<span class="title function_">map</span>(<span class="function"><span class="params">key</span> =&gt;</span> obj[key])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="高级类型（3）：映射类型"><a href="#高级类型（3）：映射类型" class="headerlink" title="高级类型（3）：映射类型"></a>高级类型（3）：映射类型</h2><p>可以从旧的类型生成一个新的类型，比如：把一个属性中所有属性变为只读。<br>例：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Obj</span> &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="built_in">string</span>;</span><br><span class="line">    <span class="attr">b</span>: <span class="built_in">number</span>;</span><br><span class="line">    <span class="attr">c</span>: <span class="built_in">boolean</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> <span class="title class_">ReadonlyObj</span> = <span class="title class_">Readonly</span>&lt;<span class="title class_">Obj</span>&gt;</span><br><span class="line"><span class="comment">// ts内置Readonly实现方法</span></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Readonly</span>&lt;T&gt; = &#123;</span><br><span class="line">    <span class="keyword">readonly</span> [P <span class="keyword">in</span> keyof T]: T[P];</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> <span class="title class_">PartialObj</span> = <span class="title class_">Partial</span>&lt;<span class="title class_">Obj</span>&gt;</span><br><span class="line"><span class="comment">// ts内置Partial实现方法</span></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Partial</span>&lt;T&gt; = &#123;</span><br><span class="line">    [p <span class="keyword">in</span> keyof T] ?: T[p];</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// Pick类型 抽取Object的字集</span></span><br><span class="line"><span class="comment">// a和b会单独抽离出来，形成一个新的类型</span></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">PickObj</span> = <span class="title class_">Pick</span>&lt;<span class="title class_">Obj</span>, <span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;b&#x27;</span>&gt;</span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Pick</span>&lt;T,K <span class="keyword">extends</span> keyof T&gt; = &#123;</span><br><span class="line">    [p <span class="keyword">in</span> k]:T[p];</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">type</span> <span class="title class_">RecordObj</span> = <span class="title class_">Record</span>&lt;<span class="string">&#x27;x&#x27;</span> | <span class="string">&#x27;y&#x27;</span>, <span class="title class_">Obj</span>&gt;</span><br></pre></td></tr></table></figure>
<h2 id="高级类型（4）：条件类型"><a href="#高级类型（4）：条件类型" class="headerlink" title="高级类型（4）：条件类型"></a>高级类型（4）：条件类型</h2><p>是一种由条件表达式所确定的类型。<br>表达形式 &#x3D;&gt; T extends U ? X : Y<br>如果类型T可以被赋值给类型U，哪结果类型为X类型，否者为Y类型。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> <span class="title class_">TypeName</span>&lt;T&gt; = </span><br><span class="line">    T <span class="keyword">extends</span> <span class="built_in">string</span> ? <span class="string">&quot;string&quot;</span> :</span><br><span class="line">    T <span class="keyword">extends</span> <span class="built_in">number</span> ? <span class="string">&quot;number&quot;</span> :</span><br><span class="line">    T <span class="keyword">extends</span> <span class="built_in">boolean</span> ? <span class="string">&quot;boolean&quot;</span> :</span><br><span class="line">    T <span class="keyword">extends</span> <span class="literal">undefined</span> ? <span class="string">&quot;undefined&quot;</span> :</span><br><span class="line">    T <span class="keyword">extends</span> <span class="title class_">Function</span> ? <span class="string">&quot;Function&quot;</span> :</span><br><span class="line">    <span class="string">&quot;object&quot;</span>;</span><br><span class="line"><span class="keyword">type</span> <span class="variable constant_">T1</span> = <span class="title class_">TypeName</span>&lt;<span class="built_in">string</span>&gt; <span class="comment">//推断为：string</span></span><br><span class="line"><span class="keyword">type</span> <span class="variable constant_">T2</span> = <span class="title class_">TypeName</span>&lt;<span class="built_in">string</span>[]&gt; <span class="comment">//字面量类型值为T2=&quot;object&quot;</span></span><br><span class="line"><span class="comment">// 分布式条件类型</span></span><br><span class="line"><span class="comment">// (A | B) extends U ? X : Y  //拆解为</span></span><br><span class="line"><span class="comment">// (A extends U ? X : Y) | (B extends U ? X : Y)</span></span><br><span class="line"><span class="keyword">type</span> <span class="variable constant_">T3</span> = <span class="title class_">TypeName</span>&lt;<span class="built_in">string</span> | <span class="built_in">string</span>[]&gt;</span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Diff</span>&lt;T,U&gt; = T <span class="keyword">extends</span> U ? <span class="built_in">never</span> : T</span><br><span class="line"><span class="keyword">type</span> <span class="variable constant_">T4</span> = <span class="title class_">Diff</span>&lt;<span class="string">&#x27;a&#x27;</span>| <span class="string">&#x27;b&#x27;</span> | <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;e&#x27;</span>&gt;</span><br><span class="line"><span class="comment">// Diff&lt;&#x27;a&#x27;, &#x27;a&#x27; | &#x27;e&#x27;&gt; | Diff&lt;&#x27;b&#x27;, &#x27;a&#x27;|&#x27;e&#x27;&gt; | Diff&lt;&#x27;c&#x27;, &#x27;a&#x27;|&#x27;e&#x27;&gt;</span></span><br><span class="line"><span class="comment">// never | &#x27;b&#x27; | &#x27;c&#x27;</span></span><br><span class="line"><span class="comment">// &#x27;b&#x27; | &#x27;c&#x27;</span></span><br></pre></td></tr></table></figure>
<p>从类型T中可以过滤掉类型U的类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">type</span> <span class="title class_">NotNull</span>&lt;T&gt; = <span class="title class_">Diff</span>&lt;T, <span class="literal">undefined</span> | <span class="literal">null</span>&gt;</span><br><span class="line"><span class="keyword">type</span> <span class="variable constant_">T5</span> = <span class="title class_">NotNull</span>&lt;<span class="built_in">string</span> | <span class="built_in">number</span> | <span class="literal">undefined</span> | <span class="literal">null</span>&gt;</span><br><span class="line"><span class="title class_">Exclude</span>&lt;T, U&gt; <span class="comment">//从类型T中过滤掉可以赋值给类型U的类型</span></span><br><span class="line"><span class="title class_">NonNullable</span>&lt;T&gt;</span><br><span class="line"><span class="title class_">Extract</span>&lt;T, U&gt; <span class="comment">//可以从类型T中抽取出可以赋值给U的类型</span></span><br><span class="line"><span class="keyword">type</span> <span class="variable constant_">T6</span> = <span class="title class_">Extract</span>&lt;<span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;b&#x27;</span> | <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;a&#x27;</span> | <span class="string">&#x27;e&#x27;</span>&gt;</span><br><span class="line"><span class="title class_">RetrunType</span>&lt;T&gt; <span class="comment">// 可以获取一个函数返回值的类型</span></span><br><span class="line"><span class="keyword">type</span> <span class="variable constant_">T7</span> = <span class="title class_">ReturnType</span>&lt;<span class="function">()=&gt;</span><span class="built_in">string</span>&gt;</span><br><span class="line"><span class="comment">// infer 待推断或延迟推断</span></span><br></pre></td></tr></table></figure>

<h2 id="列举一些常用的辅助函数"><a href="#列举一些常用的辅助函数" class="headerlink" title="列举一些常用的辅助函数"></a>列举一些常用的辅助函数</h2><p>TypeScript 提供了很多辅助函数来帮助我们处理类型。这里列举一些常用的 TypeScript 辅助函数：<br>Partial<T>：将类型 T 的所有属性设置为可选属性。<br>Required<T>：将类型 T 的所有属性设置为必选属性。<br>Readonly<T>：将类型 T 的所有属性设置为只读属性。<br>Record&lt;K, T&gt;：返回一个包含类型为 T 的值的对象，该对象的键为类型为 K 的值。<br>Pick&lt;T, K&gt;：从类型 T 中选取一组属性 K 并返回一个新的类型。<br>Exclude&lt;T, U&gt;：从类型 T 中排除类型 U 的所有属性。<br>Extract&lt;T, U&gt;：从类型 T 中提取类型 U 的所有属性。<br>Omit&lt;T, K&gt;：从类型 T 中移除属性 K 并返回一个新的类型。<br>NonNullable<T>：从类型 T 中移除 null 和 undefined 并返回一个新的类型。<br>ReturnType<T>：返回函数类型 T 的返回类型。<br>Parameters<T>：返回函数类型 T 的参数类型。<br>ConstructorParameters<T>：返回构造函数类型 T 的参数类型。<br>InstanceType<T>：返回构造函数类型 T 的实例类型。<br>RequiredKeys<T>：返回类型 T 中所有必须的属性的键的联合类型。<br>OptionalKeys<T>：返回类型 T 中所有可选的属性的键的联合类型。<br>这些辅助函数可以使我们更加方便地定义和操作 TypeScript 类型。当然，还有很多其他的辅助函数，具体使用时需要根据实际情况选择合适的函数。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2023/04/21/TypeScript2/" data-id="cljmgj1eu000azc9jerna7vae" data-title="TypeScript 2" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-TypeScript" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2023/04/20/TypeScript/" class="article-date">
  <time class="dt-published" datetime="2023-04-20T12:27:11.000Z" itemprop="datePublished">2023-04-20</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/bailment-blog/2023/04/20/TypeScript/">TypeScript</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h2 id="基础"><a href="#基础" class="headerlink" title="基础"></a>基础</h2><p>TS基本类型：Boolean Number String Array Function Object Symbol undefined null<br>            Void any never 元祖 枚举 高级类型（交叉类型 联合类型 条件类型 索引类型 映射类型）</p>
<p>–类型注解– 作用:相当于强类型语音中的类型声明<br>语法：（变量&#x2F;函数）: type<br>原始类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">bool</span>:<span class="built_in">boolean</span> = <span class="literal">true</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">num</span>:<span class="built_in">number</span> = <span class="number">123</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>:<span class="built_in">string</span> = <span class="string">&#x27;abc&#x27;</span></span><br></pre></td></tr></table></figure>
<p>数组：相同类型的集合</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 两种写法</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr1</span>:<span class="built_in">number</span>[] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr2</span>:<span class="title class_">Array</span>&lt;<span class="built_in">number</span>&gt; = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br></pre></td></tr></table></figure>
<p>联合类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">arr3</span>:<span class="title class_">Array</span>&lt;<span class="built_in">number</span> | <span class="built_in">string</span>&gt; = [<span class="number">1</span>, <span class="string">&#x27;2&#x27;</span>, <span class="number">3</span>]</span><br></pre></td></tr></table></figure>
<p>元祖：是一组特殊的数组类型，限制了数组的类型与个数。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">tuple</span>:[<span class="built_in">number</span>, <span class="built_in">string</span>] = [<span class="number">0</span>, <span class="string">&#x27;1&#x27;</span>]</span><br><span class="line"><span class="comment">// 越界：元组可以通过方法push添加元素，如tuple.push(3),如果访问tuple[2]会报错。（不能通过索引添加，可以push已有类型）</span></span><br></pre></td></tr></table></figure>
<p>函数</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> add = (<span class="attr">x</span>:<span class="built_in">number</span>,<span class="attr">y</span>:<span class="built_in">number</span>):<span class="function"><span class="params">number</span> =&gt;</span> x + y</span><br><span class="line"><span class="comment">// TS的类型推断可以省略:number</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">compute</span>:<span class="function">(<span class="params">x:<span class="built_in">number</span>, y:<span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">number</span></span><br><span class="line">    compute = <span class="function">(<span class="params">a,b</span>) =&gt;</span> a + b</span><br></pre></td></tr></table></figure>
<p>对象</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">obj</span>:&#123;<span class="attr">x</span>:<span class="built_in">number</span>,<span class="attr">y</span>:<span class="built_in">number</span>&#125;=&#123;<span class="attr">x</span>:<span class="number">1</span>,<span class="attr">y</span>:<span class="number">2</span>&#125;</span><br><span class="line">obj.<span class="property">x</span>=<span class="number">3</span></span><br></pre></td></tr></table></figure>
<p>Symbol</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">S1</span>:<span class="built_in">symbol</span>=<span class="title class_">Symbol</span>()</span><br><span class="line"><span class="keyword">let</span> <span class="variable constant_">S2</span>=<span class="title class_">Symbol</span>()</span><br></pre></td></tr></table></figure>
<p>undefined,null</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">un</span>:<span class="literal">undefined</span> = <span class="literal">undefined</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">nu</span>:<span class="literal">null</span> = <span class="literal">null</span></span><br></pre></td></tr></table></figure>
<p>void 没有任何返回值的类型 接受null和undefined</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title function_">noReturn</span> = (<span class="params"></span>) =&gt; &#123;&#125; </span><br></pre></td></tr></table></figure>
<p>any 任何类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> x; x = <span class="number">1</span>; x = []</span><br></pre></td></tr></table></figure>
<p>never 错误，死循环，类型判断时会出现never</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title function_">error</span>=(<span class="params"></span>)=&gt;&#123; <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;error&#x27;</span>) &#125;</span><br><span class="line"><span class="keyword">let</span> <span class="title function_">endless</span> = (<span class="params"></span>) =&gt; &#123; <span class="keyword">while</span>(<span class="literal">true</span>)&#123;&#125; &#125;</span><br></pre></td></tr></table></figure>
<p>枚举类型：一组有名字的常量集合。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数字枚举：默认从0开始索引，Role.Reporter 枚举成员是只读的 内部通过可以反向映射（反举）</span></span><br><span class="line"><span class="keyword">enum</span> <span class="title class_">Role</span> &#123;</span><br><span class="line">    <span class="title class_">Reporter</span>=<span class="number">1</span>,</span><br><span class="line">    <span class="title class_">Developer</span>,</span><br><span class="line">    <span class="title class_">Maintainer</span>,</span><br><span class="line">    <span class="title class_">Owner</span>,</span><br><span class="line">    <span class="title class_">Guest</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 字符串枚举 （不会反向映射）</span></span><br><span class="line"><span class="keyword">enum</span> <span class="title class_">Message</span> &#123;</span><br><span class="line">    success=<span class="string">&quot;恭喜你，成功了&quot;</span>,</span><br><span class="line">    <span class="title class_">Fail</span>=<span class="string">&quot;抱歉，失败了&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 异构枚举 ？ 注：可以有不同类型值得集合</span></span><br><span class="line"><span class="keyword">enum</span> <span class="title class_">Answer</span> &#123;</span><br><span class="line">    N,</span><br><span class="line">    Y=<span class="string">&quot;Yes&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 枚举成员</span></span><br><span class="line"><span class="keyword">enum</span> <span class="title class_">Char</span> &#123;</span><br><span class="line">    <span class="comment">// const 编译时执行</span></span><br><span class="line">    a,</span><br><span class="line">    b=<span class="title class_">Char</span>.<span class="property">a</span>,</span><br><span class="line">    c=<span class="number">1</span>+<span class="number">3</span>,</span><br><span class="line">    <span class="comment">// computed 保留到运行时环境</span></span><br><span class="line">    d=<span class="title class_">Math</span>.<span class="title function_">random</span>(),</span><br><span class="line">    e=<span class="string">&quot;123&quot;</span>.<span class="property">length</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 常量枚举</span></span><br><span class="line"><span class="keyword">const</span> <span class="keyword">enum</span> <span class="title class_">Month</span> &#123;</span><br><span class="line">    <span class="title class_">Jan</span>,</span><br><span class="line">    <span class="title class_">Feb</span>,</span><br><span class="line">    <span class="title class_">Mar</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 编译时会被移除</span></span><br><span class="line"><span class="comment">// 场景：需要对象属性值的时候，减少编译后代码体积。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 枚举类型</span></span><br><span class="line"><span class="keyword">enum</span> E &#123; a, b &#125;</span><br><span class="line"><span class="keyword">enum</span> F &#123; a=<span class="number">0</span>,b=<span class="number">1</span> &#125;</span><br><span class="line"><span class="keyword">enum</span> G &#123; a=<span class="string">&quot;apple&quot;</span>, b = <span class="string">&quot;banana&quot;</span> &#125;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">e</span>:E = <span class="number">3</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">f</span>:F = <span class="number">3</span></span><br><span class="line"><span class="comment">// e===f ? 两个不同的枚举成员之间是不可以相互比对</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">e1</span>:E.<span class="property">a</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">e2</span>:E.<span class="property">b</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">e3</span>:E.<span class="property">a</span></span><br><span class="line"><span class="comment">// e1===e2 ? 不可以比较，e1与e3可以相互比较</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">g1</span>:G=G.<span class="property">b</span>    <span class="comment">//字符串只能是枚举成员类型</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">g2</span>:G=G.<span class="property">a</span></span><br></pre></td></tr></table></figure>

<h2 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h2><p>接口用来约束对象，函数，以及类的结构与类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">List</span> &#123;</span><br><span class="line">    <span class="keyword">readonly</span> <span class="attr">id</span>:<span class="built_in">number</span>;</span><br><span class="line">    age?:<span class="built_in">number</span>;<span class="comment">//可选属性</span></span><br><span class="line">    <span class="attr">name</span>:<span class="built_in">string</span>;</span><br><span class="line">    [<span class="attr">x</span>:<span class="built_in">string</span>]:<span class="built_in">any</span>; <span class="comment">//字符串索引签名</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Result</span> &#123;</span><br><span class="line">    <span class="attr">data</span>: <span class="title class_">List</span>[]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">render</span>(<span class="params">result:result</span>) &#123;</span><br><span class="line">    result.<span class="property">data</span>.<span class="title function_">forEach</span>(<span class="function"><span class="params">val</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(value)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 绕过类型检查①</span></span><br><span class="line"><span class="keyword">let</span> result = &#123;</span><br><span class="line">    <span class="attr">data</span>: [&#123; <span class="attr">id</span>:<span class="number">1</span>, <span class="attr">name</span>: <span class="string">&#x27;A&#x27;</span>, <span class="attr">sex</span>: <span class="string">&#x27;male&#x27;</span> &#125;, &#123; <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">&#x27;b&#x27;</span> &#125;]</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">render</span>(result)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 绕过类型检查②</span></span><br><span class="line"><span class="comment">// 类型断言：告知编译(TS) 我知道它是Result类型</span></span><br><span class="line"><span class="title function_">render</span>(&#123;<span class="attr">data</span>: [&#123; <span class="attr">id</span>:<span class="number">1</span>,<span class="attr">name</span>: <span class="string">&#x27;A&#x27;</span>, <span class="attr">sex</span>: <span class="string">&#x27;male&#x27;</span> &#125;, </span><br><span class="line">                &#123;<span class="attr">id</span>:<span class="number">2</span>, <span class="attr">name</span>: <span class="string">&#x27;13&#x27;</span>&#125;</span><br><span class="line">            ]&#125; <span class="keyword">as</span> <span class="title class_">Result</span> )</span><br><span class="line"></span><br><span class="line"><span class="comment">// 绕过类型检查③</span></span><br><span class="line"><span class="comment">// react中会有语法(jsx语法)问题</span></span><br><span class="line"><span class="title function_">render</span>(&lt;<span class="title class_">Result</span>&gt;&#123;</span><br><span class="line">    <span class="attr">data</span>: [</span><br><span class="line">        &#123;<span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">&#x27;A&#x27;</span>, <span class="attr">sex</span>: <span class="string">&#x27;male&#x27;</span>&#125;,</span><br><span class="line">        &#123;<span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">&#x27;b&#x27;</span>&#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 不确定接口有多少属性(索引签名)</span></span><br><span class="line"><span class="comment">// 可索引类型的接口 数字索引签名</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">StringArray</span> &#123;</span><br><span class="line">    [<span class="attr">index</span>: <span class="built_in">number</span>]: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">chars</span>:<span class="title class_">StringArray</span>=[<span class="string">&#x27;A&#x27;</span>,<span class="string">&#x27;B&#x27;</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 字符串索引签名</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Names</span> &#123;</span><br><span class="line">    [<span class="attr">x</span>:<span class="built_in">string</span>]: <span class="built_in">string</span>;</span><br><span class="line">    [<span class="attr">z</span>: <span class="built_in">number</span>]: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 1.当接口定义了一个索引后，例如设置了[x: string] = string,就不能设置y:number了。</span></span><br><span class="line"><span class="comment">因为设置了[x:string]=string 相当于这个接口的字符串索引返回值都为字符串，而y:number违背这一原则。反之益然。</span></span><br><span class="line"><span class="comment">2. 可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。</span></span><br><span class="line"><span class="comment">因为数字索引或转化为字符串索引，而转化的这部分索引对应值的类型范围超过了字符串索引类型的范围。报错，超出范围。</span></span><br><span class="line"><span class="comment">**/</span></span><br></pre></td></tr></table></figure>
<h2 id="函数类型接口"><a href="#函数类型接口" class="headerlink" title="函数类型接口"></a>函数类型接口</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义函数类型三种方式？</span></span><br><span class="line"><span class="comment">// 第一种</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">add</span>:<span class="function">(<span class="params">x: <span class="built_in">number</span>, y:<span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">number</span></span><br><span class="line"><span class="comment">// 第二种</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Add</span> &#123;</span><br><span class="line">    (<span class="attr">x</span>:<span class="built_in">number</span>, <span class="attr">y</span>:<span class="built_in">number</span>):<span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 第三种 类型别名</span></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Add</span> = <span class="function">(<span class="params">x:<span class="built_in">number</span>, y: <span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">number</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">add</span>:<span class="title class_">Add</span> = <span class="function">(<span class="params">a,b</span>) =&gt;</span> a+b</span><br></pre></td></tr></table></figure>
<p>混合类型 一个接口即可以定义函数也可像对象一样定义属性和方法。<br>用混合类型来定义一个类库：interface定义混合类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Lib</span>() &#123;</span><br><span class="line">    (): <span class="title class_">Void</span>;</span><br><span class="line">    <span class="attr">version</span>: <span class="built_in">string</span>;</span><br><span class="line">    <span class="title function_">doSomething</span>(): <span class="title class_">Void</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getLib</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">lib</span>:<span class="title class_">Lib</span>(<span class="function">()=&gt;</span> &#123;&#125;) <span class="keyword">as</span> <span class="title class_">Lib</span>;</span><br><span class="line">    lib.<span class="property">version</span> = <span class="string">&#x27;1.0&#x27;</span>;</span><br><span class="line">    lib.<span class="property">doSomething</span> = <span class="function">() =&gt;</span> &#123;&#125;</span><br><span class="line">    <span class="keyword">return</span> lib;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="函数相关知识点梳理"><a href="#函数相关知识点梳理" class="headerlink" title="函数相关知识点梳理"></a>函数相关知识点梳理</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 函数定义</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add1</span>(<span class="params">x:<span class="built_in">number</span>, y:<span class="built_in">number</span></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> x+y</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">add2</span>:<span class="function">(<span class="params">x:<span class="built_in">number</span>, y:<span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">number</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">type</span> add3 = <span class="function">(<span class="params">x:<span class="built_in">number</span>, y:<span class="built_in">number</span></span>) =&gt;</span> <span class="built_in">number</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">interface</span> add4 &#123;</span><br><span class="line">    (<span class="attr">x</span>:<span class="built_in">number</span>, <span class="attr">y</span>: <span class="built_in">number</span>): <span class="built_in">number</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 函数参数要求     可选参数 ? !</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add5</span>(<span class="params">x: <span class="built_in">number</span>, y?:<span class="built_in">number</span></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> y? x+y : x;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add6</span>(<span class="params">x:<span class="built_in">number</span>, y=<span class="number">0</span>, z:<span class="built_in">number</span>, q=<span class="number">1</span></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> x+y+z+q</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add7</span>(<span class="params">x:<span class="built_in">number</span>, ...rest:<span class="built_in">number</span>[]</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> x+rest.<span class="title function_">reduce</span>((pre,<span class="function"><span class="params">cur</span>=&gt;</span>pre+cur))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>TypeScript中函数重载：<br>在C++或Java静态语言中，两个函数名称相同，但参数类型不同或者参数个数不同，实现了重载。<br>重载的好处：不需要为功能相似的函数起不同的名称。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add8</span>(<span class="params">...rest:<span class="built_in">number</span>[]</span>):<span class="built_in">number</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add8</span>(<span class="params">...rest:<span class="built_in">string</span>[]</span>):<span class="built_in">string</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">add8</span>(<span class="params">..rest:<span class="built_in">any</span>[]</span>):<span class="built_in">any</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> first = rest[<span class="number">0</span>]</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> first === <span class="string">&#x27;string&#x27;</span>) &#123;&#125;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> first === <span class="string">&#x27;number&#x27;</span>) &#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="类-继承和成员修饰符"><a href="#类-继承和成员修饰符" class="headerlink" title="类 (继承和成员修饰符)"></a>类 (继承和成员修饰符)</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Dog</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attr">name</span>: sting <span class="comment">//TS在类中使用this,需要先声明类型之后再使用。</span></span><br><span class="line">    <span class="comment">// constructor() &#123;public x:number&#125; &#123;&#125; 跟上边一样</span></span><br><span class="line">    <span class="title function_">run</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Dog</span>.<span class="property">Prototype</span>)</span><br><span class="line"><span class="keyword">let</span> dog = <span class="keyword">new</span> <span class="title class_">Dog</span>(<span class="string">&#x27;wangwang&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">1.name属性在实例上，而不在原型上</span></span><br><span class="line"><span class="comment">2.实例的属性必须有初始值。改为： name:string=&#x27;dog&#x27;</span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>类的继承</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Huskey</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Dog</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name:<span class="built_in">string</span>, color:<span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="variable language_">super</span>(name) <span class="comment">//继承父类一定加supter 等于 Dog.call(this,name)</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">color</span>=color</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attr">color</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>类的成员修饰符<br>类的所有属性默认为public,对所有开放<br>类的私有成员只能被类本身调用，不能被类的实例与子类调用。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">private</span> <span class="title function_">pri</span>(<span class="params"></span>) &#123;&#125; <span class="title class_">Dog</span>.<span class="title class_">Pri</span>()</span><br><span class="line"><span class="keyword">private</span> <span class="title function_">constructor</span>(<span class="params"></span>) &#123;&#125; <span class="comment">//即不能被实例化也不能被继承</span></span><br><span class="line"><span class="keyword">protected</span> <span class="comment">//受保护成员 只能类或子类访问，不能被类的实例访问</span></span><br><span class="line"><span class="keyword">readonly</span>  <span class="comment">//只读 只读属性不能更改，一定要被初始化</span></span><br><span class="line"><span class="comment">// 构造函数也可以添加修饰符。作用：将参数作为实例的属性，可以省去在类中的定义。</span></span><br><span class="line"><span class="keyword">static</span> <span class="attr">food</span>:sting = <span class="string">&#x27;bones&#x27;</span> <span class="comment">//静态修饰符只能通过类名调用可以被继承</span></span><br></pre></td></tr></table></figure>
<h2 id="抽象类与多态"><a href="#抽象类与多态" class="headerlink" title="抽象类与多态"></a>抽象类与多态</h2><p>抽象类关键字abstract 只能被继承，不能被实例化的类<br>好处：可以抽离出一些事物的共性，有利于代码复用，扩展，实现多态。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">abstract</span> calss <span class="title class_">Animal</span> &#123;</span><br><span class="line">    <span class="title function_">eat</span>(<span class="params"></span>) &#123;&#125; <span class="comment">//方法的复用</span></span><br><span class="line">    <span class="keyword">abstract</span> <span class="title function_">sleep</span>(): <span class="built_in">void</span> <span class="comment">//抽象方法的好处是明确知道子类有其他的实现，不必在父类实现</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="多态"><a href="#多态" class="headerlink" title="多态"></a>多态</h2><p>在父类中定义一个抽象方法，在多个子类中对这个方法有不同的实现。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Dog</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Animal</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="variable language_">super</span>()</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attr">name</span>:<span class="built_in">string</span></span><br><span class="line">    <span class="title function_">sleep</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;dog sleep&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> dog = <span class="keyword">new</span> <span class="title class_">Dog</span>()</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Cat</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Animal</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Cap sleep&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> cat = <span class="keyword">new</span> <span class="title class_">Cat</span>()</span><br><span class="line"><span class="keyword">let</span> <span class="attr">animals</span>:<span class="title class_">Animalp</span>[] = [dog, cat]</span><br><span class="line">animals.<span class="title function_">forEach</span>(<span class="function"><span class="params">i</span> =&gt;</span> &#123;</span><br><span class="line">    i.<span class="title function_">sleep</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>this类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">WorkFlow</span> &#123;</span><br><span class="line">    <span class="title function_">step1</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">step2</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Myflow</span> <span class="keyword">extends</span> <span class="title class_ inherited__">WorkFlow</span> &#123;</span><br><span class="line">    <span class="title function_">next</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Myfow</span>().<span class="title function_">next</span>().<span class="title function_">step1</span>().<span class="title function_">next</span>().<span class="title function_">step2</span>()</span><br></pre></td></tr></table></figure>
<h2 id="类与接口的关系"><a href="#类与接口的关系" class="headerlink" title="类与接口的关系"></a>类与接口的关系</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 类继承接口</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Human</span> &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="built_in">string</span>;</span><br><span class="line">    <span class="title function_">eat</span>():<span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Asian</span> <span class="keyword">implements</span> <span class="title class_">Human</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attr">name</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="title function_">eat</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>一个接口可以约束类成员有哪些属性以及他们的类型。<br>1.类实现接口的时候必须实现接口中声明的属性。<br>2.接口只能约束类的共有成员。<br>3.接口不能约束类的构造函数。</p>
<h2 id="接口之间的继承"><a href="#接口之间的继承" class="headerlink" title="接口之间的继承"></a>接口之间的继承</h2><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Man</span> <span class="keyword">extends</span> <span class="title class_">Human</span> &#123;</span><br><span class="line">    <span class="title function_">run</span>():<span class="built_in">void</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Child</span> &#123;</span><br><span class="line">    <span class="title function_">cry</span>():<span class="built_in">void</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Boy</span> <span class="keyword">extends</span> <span class="title class_">Man</span>,<span class="title class_">Child</span> &#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">boy</span>:<span class="title class_">Boy</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">    <span class="title function_">run</span>(<span class="params"></span>) &#123;&#125;,</span><br><span class="line">    <span class="title function_">cry</span>(<span class="params"></span>) &#123;&#125;,</span><br><span class="line">    <span class="title function_">eat</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>接口的继承可抽离可重用的接口，可将多个接口合并一个接口。</p>
<h2 id="接口继承类"><a href="#接口继承类" class="headerlink" title="接口继承类"></a>接口继承类</h2><p>接口把类的成员都抽象了出来，有类的成员结构而没有具体的实现。<br>？表示的取值<br>！非空赋值</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Auto</span> &#123;</span><br><span class="line">    state = <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">AutoInterface</span> <span class="keyword">extends</span> <span class="title class_">Auto</span> &#123;&#125;</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">C</span> <span class="keyword">implements</span> <span class="title class_">AutoInterface</span> &#123;</span><br><span class="line">    state = <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Bus</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Auto</span> <span class="keyword">implements</span> <span class="title class_">AutoInterface</span> &#123;&#125;</span><br></pre></td></tr></table></figure>
<p>接口可以限制类型，接口中不能有非抽象的方法，接口中都是抽象的，不能有具体的实现。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> <span class="title class_">Eat</span> &#123;</span><br><span class="line">    <span class="comment">// 原型还是实例？</span></span><br><span class="line">    <span class="attr">eat</span>:<span class="function">() =&gt;</span> <span class="built_in">void</span> <span class="comment">//实例</span></span><br><span class="line">    <span class="title function_">drink</span>():<span class="built_in">void</span> <span class="comment">//原型</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Tom</span> <span class="keyword">implements</span> <span class="title class_">Eat</span> &#123;&#125;</span><br></pre></td></tr></table></figure>
<p>接口来描述构造函数 如何做？需要采用typeof</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Mouse</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"><span class="keyword">public</span> name:<span class="built_in">string</span>, <span class="keyword">public</span> age:<span class="built_in">number</span></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getInstance</span>(<span class="params">clazz: ICazzz</span>) &#123;&#125;</span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Iclazz</span> = <span class="keyword">new</span> (<span class="attr">name</span>:<span class="built_in">string</span>, <span class="attr">age</span>:<span class="built_in">number</span>) =&gt; <span class="built_in">any</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Icazzz</span> &#123; <span class="keyword">new</span> (<span class="attr">name</span>:<span class="built_in">string</span>, <span class="attr">age</span>:<span class="built_in">number</span>):<span class="built_in">any</span> &#125;</span><br></pre></td></tr></table></figure>
<h2 id="泛型"><a href="#泛型" class="headerlink" title="泛型"></a>泛型</h2><p>不预先确定的数据类型，具体的类型在使用的时候才能确定。<br>1.泛型定义函数与2.泛型定义类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// function log(value:string):string &#123;</span></span><br><span class="line"><span class="comment">//     return value</span></span><br><span class="line"><span class="comment">// &#125;    便于理解下边的泛型</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//一 接收的参数是确定的。函数重载 联合类型 any类型 泛型 </span></span><br><span class="line"><span class="keyword">function</span> log&lt;T&gt;(<span class="attr">value</span>:T):T &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(value)</span><br><span class="line">    <span class="keyword">return</span> value</span><br><span class="line">&#125;</span><br><span class="line">log&lt;<span class="built_in">string</span>[]&gt;([<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>])</span><br><span class="line"><span class="comment">// log([&#x27;a&#x27;, &#x27;b&#x27;])</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//二：泛型</span></span><br><span class="line"><span class="keyword">type</span> <span class="title class_">Log</span> = &lt;T&gt;<span class="function">(<span class="params">value: T</span>) =&gt;</span> T</span><br><span class="line"><span class="keyword">let</span> <span class="title class_">MyLog</span>:<span class="title class_">Log</span> = log</span><br><span class="line"></span><br><span class="line"><span class="comment">// 三: 泛型约束函数</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Log</span> &#123;</span><br><span class="line">    &lt;T&gt;(<span class="attr">value</span>:T):T</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 泛型约束其他成员 &lt;T=string&gt;默认类型</span></span><br><span class="line"><span class="keyword">interface</span> <span class="title class_">Log</span>&lt;T&gt; &#123;</span><br><span class="line">    (<span class="attr">value</span>: T)T</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 使用时必须指定一个类型</span></span><br><span class="line"><span class="keyword">let</span> <span class="title class_">Mylog</span>:<span class="title class_">Log</span>&lt;<span class="built_in">number</span>&gt; = log</span><br></pre></td></tr></table></figure>


      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2023/04/20/TypeScript/" data-id="cljmgj1eu0009zc9jczm2hw4v" data-title="TypeScript" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-前端配置-常见问题" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2023/03/30/%E5%89%8D%E7%AB%AF%E9%85%8D%E7%BD%AE-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/" class="article-date">
  <time class="dt-published" datetime="2023-03-30T02:50:23.000Z" itemprop="datePublished">2023-03-30</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/bailment-blog/2023/03/30/%E5%89%8D%E7%AB%AF%E9%85%8D%E7%BD%AE-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/">前端配置&amp;常见问题</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h3 id="安装-React-devtools"><a href="#安装-React-devtools" class="headerlink" title="安装 React-devtools"></a>安装 React-devtools</h3><p>1.去git上下载react-devtools文件到本地，下载地址： <a target="_blank" rel="noopener" href="https://github.com/facebook/react-devtools">https://github.com/facebook/react-devtools</a> ；<br>可以直接下载zip安装包解压，或者通过git clone来将项目拷贝到本地<br>git clone <a target="_blank" rel="noopener" href="https://github.com/facebook/react-devtools.git">https://github.com/facebook/react-devtools.git</a><br>2.进入react-devtools文件夹，用npm安装依赖，这里推荐临时使用淘宝镜像，快速一点。<br>npm –registry <a target="_blank" rel="noopener" href="https://registry.npm.taobao.org/">https://registry.npm.taobao.org</a> install<br>3.安装依赖成功后，我们便可以打包一份扩展程序出来。运行<br>npm run build:extension:chrome<br>4.并且会在你的项目目录中生成一个新的文件夹，react-devtools -&gt; shells -&gt; chrome -&gt; build -&gt; unpacked文件夹<br>5.打开chrome扩展程序chrome:&#x2F;&#x2F;extensions&#x2F;，加载已解压的扩展程序，选择第3步中的生成的unpacked文件夹。这时就会添加一个新的扩展程序react-devtools，并在你的浏览器右上角会有个react标志, 就表示成功啦。</p>
<h3 id="安装-Vue-devtools"><a href="#安装-Vue-devtools" class="headerlink" title="安装 Vue-devtools"></a>安装 Vue-devtools</h3><p>vue-devtools的安装与使用<br>一.在github上下载压缩包，github下载地址：<a target="_blank" rel="noopener" href="https://github.com/vuejs/vue-devtools">https://github.com/vuejs/vue-devtools</a><br>二.解压到本地磁盘<br>三.用你的npm中进入该文件夹下<br>四.依次输:<br>1:npm install （如果在这部报错的话，就改用cnpm install。 cnpm需要安装 安装地址）<br>2:npm run build (这一步一定不要忘了，没有执行这一步的话，项目文件夹shells&gt;chrome文件夹里会少一个src文件夹,如下图)<br>五：修改shells&gt;chrome文件夹下的mainifest.json 中的persistant为true<br>六：我们找到谷歌浏览器的扩展程序功能，勾选开发者模式，然后我们将插件文件夹里的shells&gt;chorme文件夹直接拖到页面中，完成安装。<br>（注意：如果我们没有执行第四部的npm run build，在这里会报错：无法加载背景脚本”build&#x2F;background.js”）<br>七：在插件的目录下执行npm run dev，这个时候我们的插件就可以运行了,打开localhost:8080可以看到插件已经安装并运行了。<br>八：我们在打开本地的其他项目时，就不需要在vue-devtools文件夹下执行npm run dev了，因为这个插件已经安装在浏览器中。接下来就愉快的调试你的vue项目吧。</p>
<h3 id="为什么网站要服务端渲染和客户端渲染？"><a href="#为什么网站要服务端渲染和客户端渲染？" class="headerlink" title="为什么网站要服务端渲染和客户端渲染？"></a>为什么网站要服务端渲染和客户端渲染？</h3><p>服务端渲染和客户端渲染<br>客户端渲染不利于 SEO 搜索引擎优化<br>服务端渲染是可以被爬虫抓取到的,而客户端渲染很难被爬虫抓取到<br>真正的网站即不是纯异步也不是纯服务端渲染出来<br>而是两者结合来做<br>如京东的商品列表就是采用服务端渲染，目的是为了SEO搜索引擎优化<br>而商品评论是为了用户体验,而且也不需要SEO优化,所以才有客户端渲染</p>
<h3 id="npm淘宝镜像"><a href="#npm淘宝镜像" class="headerlink" title="npm淘宝镜像"></a>npm淘宝镜像</h3><p>淘宝 npm 地址： <a target="_blank" rel="noopener" href="http://npm.taobao.org/">http://npm.taobao.org/</a><br>1.临时使用<br>npm –registry <a target="_blank" rel="noopener" href="https://registry.npm.taobao.org/">https://registry.npm.taobao.org</a> install express<br>2.持久使用<br>npm config set registry <a target="_blank" rel="noopener" href="https://registry.npm.taobao.org/">https://registry.npm.taobao.org</a><br>配置后可通过下面方式来验证是否成功<br>npm config get registry 或 npm info express<br>3.通过cnpm使用<br>npm install -g cnpm –registry&#x3D;<a target="_blank" rel="noopener" href="https://registry.npm.taobao.org/">https://registry.npm.taobao.org</a><br>使用 cnpm install express</p>
<h3 id="CommonJS中-module-exports-与-exports"><a href="#CommonJS中-module-exports-与-exports" class="headerlink" title="CommonJS中 module.exports 与 exports"></a>CommonJS中 module.exports 与 exports</h3><p>module.exports &#x3D; {} 导出一个对象<br>var exports &#x3D; module.exports</p>
<p>如果改变了module.exports,但还想使用 exports.xxx 的方法暴露一些东西<br>需要让exports重新指向module.exports<br>module.exports &#x3D; {};<br>exports &#x3D; module.exports;</p>
<p>常见写法：<br>exports &#x3D; module.exports &#x3D; {}</p>
<p>微信小程序<br>文档地址: <a target="_blank" rel="noopener" href="https://developers.weixin.qq.com/">https://developers.weixin.qq.com/</a></p>
<h3 id="使用http-server开启一个本地服务器"><a href="#使用http-server开启一个本地服务器" class="headerlink" title="使用http-server开启一个本地服务器"></a>使用http-server开启一个本地服务器</h3><p>1 下载node.js<br>官网地址： <a target="_blank" rel="noopener" href="https://nodejs.org/">https://nodejs.org</a><br>下载完成后在命令行输入命令$ node -v以及$ npm -v检查版本，确认是否安装成功<br>2 下载http-server<br>在终端输入：<br>$ npm install http-server -g<br>3 开启 http-server服务<br>终端进入目标文件夹，然后在终端输入：</p>
<p>$ http-server -o -c-1 （只输入http-server的话，更新了代码后，页面不会同步更新）<br>(o 为 open的意思)<br>Starting up http-server, serving .&#x2F;<br>Available on:<br><a target="_blank" rel="noopener" href="http://127.0.0.1:8080/">http://127.0.0.1:8080</a><br><a target="_blank" rel="noopener" href="http://192.168.8.196:8080/">http://192.168.8.196:8080</a></p>
<p>Hit CTRL-C to stop the server<br>4 关闭 http-server服务<br>按快捷键CTRL-C</p>
<h3 id="Vue-router-路由"><a href="#Vue-router-路由" class="headerlink" title="Vue-router 路由"></a>Vue-router 路由</h3><p>mode:”hash”;<br>mode:”history”;<br>hash模式和history模式的不同<br>对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2023/03/30/%E5%89%8D%E7%AB%AF%E9%85%8D%E7%BD%AE-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/" data-id="cljmgj1f1000szc9jcx0sd7ol" data-title="前端配置&amp;常见问题" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  
    <article id="post-1.net" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/bailment-blog/2022/03/29/1.net/" class="article-date">
  <time class="dt-published" datetime="2022-03-29T14:12:00.000Z" itemprop="datePublished">2022-03-29</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="p-name article-title" href="/bailment-blog/2022/03/29/1.net/">1.net</a>
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <ul>
<li><p>client</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> net = <span class="built_in">require</span>(<span class="string">&#x27;net&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> socket = <span class="keyword">new</span> net.<span class="title class_">Socket</span>();</span><br><span class="line"><span class="comment">// 连接8080端口</span></span><br><span class="line">socket.<span class="title function_">connect</span>(<span class="number">8080</span>, <span class="string">&#x27;localhost&#x27;</span>);</span><br><span class="line"><span class="comment">// 连接成功后给服务端发送消息</span></span><br><span class="line">socket.<span class="title function_">on</span>(<span class="string">&#x27;connect&#x27;</span>, <span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">    <span class="comment">// socket.write(&#x27;hello&#x27;); // 浏览器和客户端说 hello</span></span><br><span class="line">    socket.<span class="title function_">end</span>()</span><br><span class="line">&#125;);</span><br><span class="line">socket.<span class="title function_">on</span>(<span class="string">&#x27;data&#x27;</span>, <span class="keyword">function</span> (<span class="params">data</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(data.<span class="title function_">toString</span>())</span><br><span class="line">&#125;)</span><br><span class="line">socket.<span class="title function_">on</span>(<span class="string">&#x27;error&#x27;</span>, <span class="keyword">function</span> (<span class="params">error</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(error);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
</li>
<li><p>server</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> net = <span class="built_in">require</span>(<span class="string">&#x27;net&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> server = net.<span class="title function_">createServer</span>(<span class="keyword">function</span> (<span class="params">socket</span>) &#123;</span><br><span class="line">    socket.<span class="title function_">on</span>(<span class="string">&#x27;data&#x27;</span>, <span class="keyword">function</span> (<span class="params">data</span>) &#123; <span class="comment">// 客户端和服务端</span></span><br><span class="line">        <span class="comment">// socket.write(&#x27;hi&#x27;); // 服务端和客户端说 hi</span></span><br><span class="line">    &#125;);</span><br><span class="line">    socket.<span class="title function_">on</span>(<span class="string">&#x27;end&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;客户端关闭&#x27;</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line">server.<span class="title function_">on</span>(<span class="string">&#x27;error&#x27;</span>, <span class="keyword">function</span> (<span class="params">err</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(err);</span><br><span class="line">&#125;)</span><br><span class="line">server.<span class="title function_">listen</span>(<span class="number">8080</span>); <span class="comment">// 监听8080端口</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>udp-client</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> dgram = <span class="built_in">require</span>(<span class="string">&#x27;dgram&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> socket = dgram.<span class="title function_">createSocket</span>(<span class="string">&#x27;udp4&#x27;</span>);</span><br><span class="line">socket.<span class="title function_">on</span>(<span class="string">&#x27;message&#x27;</span>, <span class="keyword">function</span> (<span class="params">msg, rinfo</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">toString</span>());</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(rinfo);</span><br><span class="line">&#125;);</span><br><span class="line">socket.<span class="title function_">send</span>(<span class="title class_">Buffer</span>.<span class="title function_">from</span>(<span class="string">&#x27;helloworld&#x27;</span>), <span class="number">0</span>, <span class="number">5</span>, <span class="number">41234</span>, <span class="string">&#x27;localhost&#x27;</span>, <span class="keyword">function</span> (<span class="params">err, bytes</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;发送了个%d字节&#x27;</span>, bytes);</span><br><span class="line">&#125;);</span><br><span class="line">socket.<span class="title function_">on</span>(<span class="string">&#x27;error&#x27;</span>, <span class="keyword">function</span> (<span class="params">err</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">error</span>(err);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li>
<li><p>udp-server</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> dgram = <span class="built_in">require</span>(<span class="string">&quot;dgram&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> socket = dgram.<span class="title function_">createSocket</span>(<span class="string">&quot;udp4&quot;</span>);</span><br><span class="line">socket.<span class="title function_">on</span>(<span class="string">&quot;message&quot;</span>, <span class="keyword">function</span> (<span class="params">msg, rinfo</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(msg.<span class="title function_">toString</span>());</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(rinfo);</span><br><span class="line">    socket.<span class="title function_">send</span>(msg, <span class="number">0</span>, msg.<span class="property">length</span>, rinfo.<span class="property">port</span>, rinfo.<span class="property">address</span>);</span><br><span class="line">&#125;);</span><br><span class="line">socket.<span class="title function_">bind</span>(<span class="number">41234</span>, <span class="string">&quot;localhost&quot;</span>);</span><br></pre></td></tr></table></figure></li>
</ul>
<p><a href="/images/%E7%BD%91%E7%BB%9C.pdf">网络参考</a> 🌼🌼🌼</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/wieldy/bailment-blog/2022/03/29/1.net/" data-id="cljmgj1eq0001zc9j614c6qrq" data-title="1.net" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
</article>



  


  <nav id="page-nav">
    
    <span class="page-number current">1</span><a class="page-number" href="/bailment-blog/page/2/">2</a><a class="page-number" href="/bailment-blog/page/3/">3</a><a class="extend next" rel="next" href="/bailment-blog/page/2/">Next &raquo;</a>
  </nav>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/07/">July 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/06/">June 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/04/">April 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2023/03/">March 2023</a></li><li class="archive-list-item"><a class="archive-list-link" href="/bailment-blog/archives/2022/03/">March 2022</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/bailment-blog/2023/07/03/%E5%B7%A5%E4%BD%9C%E6%97%A5%E5%BF%97/">工作日志</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/29/payMent/">payMent</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/20/%E7%BD%91%E7%BA%A2%E9%9D%A2%E8%AF%95%E9%A2%98/">原理题</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/19/%E5%89%8D%E7%AB%AF%E5%A4%A7%E5%B1%8F%E8%87%AA%E9%80%82%E5%BA%94%E6%96%B9%E6%B3%95/">前端大屏自适应方法</a>
          </li>
        
          <li>
            <a href="/bailment-blog/2023/06/17/10%E4%B8%AAJavaScript%E5%B8%B8%E8%A7%81%E9%AB%98%E7%BA%A7%E7%9F%A5%E8%AF%86%E7%82%B9/">10个JavaScript常见高级知识点</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2023 John Doe<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/bailment-blog/" class="mobile-nav-link">Home</a>
  
    <a href="/bailment-blog/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/bailment-blog/js/jquery-3.4.1.min.js"></script>



  
<script src="/bailment-blog/fancybox/jquery.fancybox.min.js"></script>




<script src="/bailment-blog/js/script.js"></script>





  </div>
</body>
</html>